<template>
  <div class="workdrawing-container">
    <div style="padding: 10px; display: flex">
      <el-button type="primary" icon="el-icon-document-add" size="small" @click="createBus">导入图纸</el-button>
      <el-button type="warning" icon="el-icon-refresh" size="small" @click="reset">全部重置</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column label="缩略图" align="center">
        <template slot-scope="scope">
          <el-image style="width: 50px; height: 50px;" :src="imgLoadPath + scope.row.active_log" fit="contain" :preview-src-list="[imgLoadPath + scope.row.active_log]">
          </el-image>
        </template>
      </el-table-column>
      <!-- <el-table-column label="序号" width="50" align="center">
            <template slot-scope="scope">
              <span>{{ scope.$index + (query.page - 1) * query.pageSize + 1 }}</span>
            </template>
          </el-table-column> -->
      <el-table-column prop="title" label="图纸名称" trigger="click" align="center" show-overflow-tooltip>
        <template slot="header" slot-scope="scope">
          <el-popover placement="bottom" title="检索" width="300" trigger="click">
            <el-input placeholder="输入关键词" v-model="val" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
            <span slot="reference">
              <span>图纸名称</span>
              <span class="el-icon-search" style="margin-left:5px;"></span>
            </span>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="类型" sortable :filters="[{text: '进行中', value: 1}, {text: '已结束', value: 1}]" align="center">
        <template slot-scope="scope" :filter-method="filterHandler">
          <el-tag v-if="scope.row.status == 1">进行中</el-tag>
          <el-tag type="info" v-if="scope.row.status == 2">已结束</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" sortable :filters="[{text: '进行中', value: 1}, {text: '已结束', value: 1}]" align="center">
        <template slot-scope="scope" :filter-method="filterHandler">
          <el-tag v-if="scope.row.status == 1">进行中</el-tag>
          <el-tag type="info" v-if="scope.row.status == 2">已结束</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="上传时间" align="center" prop="time_st" :formatter="$GLOBAL.dateFormat" />
      <el-table-column label="图纸路径" align="center" prop="time_ed" :formatter="$GLOBAL.dateFormat" />
      <el-table-column label="操作" align="center" width="260">
        <template slot-scope="scope">
          <div style="display: flex; align-items: center; justify-content: space-around">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button v-if="scope.row.id != 81" @click="handleDelete(scope.row.id)" type="text" size="small">
              <span style="color: red">删除</span>
            </el-button>
            <el-dropdown>
              <span class="el-dropdown-link">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>标记为已完成</el-dropdown-item>
                <el-dropdown-item>删除处理中的图纸</el-dropdown-item>
                <el-dropdown-item>图纸下载</el-dropdown-item>
                <el-dropdown-item>添加到图库纸</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- <div class="pagination">
      <el-pagination layout="sizes,total, prev, pager, next, jumper" :current-page="query.page" :page-size="query.pageSize" :page-sizes="[10, 50, 100, 150, 200]" @size-change="handleSizeChange" :total="total" @current-change="handlePageChange"></el-pagination>
    </div> -->
  </div>

</template>

<script>
export default {
  name: 'Workdrawing',
  data() {
    return {
      val: '',
      copyLike: '',
      channelUrl: '',
      channelList: [],
      fit: 'scale-down',
      projectArr: [],
      templateType: [],
      categoryArr: [],
      type_hdlbarr: [],
      type_hdlxarr: [],
      dialog: false, //新增模板合同弹窗
      title: '', //查看模板合同弹框标题
      tmplateName: '', //合同模板名称输入框
      // contractName: '',
      tableData: [], //数据列表
      currentPage: 1, //初始页
      total: null,
      imgLoadPath: this.$API.ASSET_IMAGES_URL,
      uploadDocUrl: '',
      DOC_PATH: this.$API.DOC_PATH,
      query: {
        page: 1,
        keyword: '',
        pageSize: 10,
        status: 0,
        status_show: -1
      },
      dialogTitle: '活动新增',
      modelType: 1,
      itemId: '',
      questionList: [],
      multipleSelection: [],
      jsonFields: {},
      fillName: '',
      publiceUrl: '',
      exhibition_url: ''
    };
  },
  filters: {
    formDate: (val) => {
      return global.getdate1(val);
    }
  },
  mounted() {
    // this.initAjaxMethod();
  },
  methods: {
    handleCopyLike(row) {
      this.copyLike = window.location.origin + '/weChatApp/#/matchDetail?id=' + row.id;
      this.dialog = true;
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //新建
    createBus() {
      this.$router.push({ path: '/zhactiveAdd', query: { type: 1 } });
    },
    //查看模板合同
    handleClick(data) {
      this.$router.push({ path: '/zhactiveAdd', query: { type: 2, id: data.id } });
    },
    //企业列表接口
    initAjaxMethod() {
      const loading = this.$loading({ text: '加载中...' });
      this.$http
        .post(this.$API.ZHACTIVE_INDEX, {
          page: this.query.page,
          keyword: this.query.keyword,
          pageSize: this.query.pageSize,
          status: this.query.status,
          status_show: this.query.status_show
        })
        .then((res) => {
          console.log('**************', res);
          loading.close();
          if (res.code == 1) {
            let list = Array.isArray(res.data.list) ? res.data.list : [];
            list.forEach(item => {
              item.status_show_switch = item.status_show == 0 ? true : false;
            });
            this.tableData = list;
            this.total = res.data.count;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(res.msg);
        });
    },
    //重置
    reset() {
      this.query.page = 1;
      this.query.keyword = '';
      this.query.exhibition_id = '';
      this.query.status = 0;
      this.query.status_show = -1;
      this.query.signup_type = -1;
      this.initAjaxMethod();
    },
    delAllSelection() {
      let arr = [];
      if (this.multipleSelection.length <= 0) {
        this.$message({
          type: 'error',
          message: '请选择活动'
        });
        return false;
      } else {
        this.multipleSelection.forEach((item) => {
          arr.push(item.id);
        });
        this.handleDelete(arr.join(','), this.$API.ZHACTIVE_ALL_DEL);
      }
    },
    changeStatus(item) {
      console.log('item', item);
      const loading = this.$loading({ text: '加载中...' });
      this.$http
        .post(this.$API.ZHACTIVE_STATUS, {
          id: item.id,
          status_show: item.status_show_switch == true ? 0 : 1
        })
        .then((res) => {
          loading.close();
          if (res.code == 1) {
            this.$message.success('操作成功!');
            this.initAjaxMethod();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(res.msg);
        });
    },
    //删除合同模板信息
    handleDelete(id, url = this.$API.ZHACTIVE_DEL) {
      console.log(id);
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post(url, { id: id }).then((res) => {
          if (res.code == 1) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.initAjaxMethod();
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            });
          }
        });
      });
    },
    //点击第几页
    handlePageChange(currentPage) {
      this.query.page = currentPage;
      this.initAjaxMethod();
    },
    //点击第几页
    handleSizeChange(currentPage) {
      this.query.pageSize = currentPage;
      this.initAjaxMethod();
    }
  }
};
</script>
</script>

